<template>
	<!--pages/index/major/detail/index.wxml-->

	<view class="container">
		<header-custom
			title="专业详情"
			:data-theme="theme"
			:style="globalColor.style"
			@change="searchChange"
		/>
		<!--专业信息-->
		<view class="schoolinfo fboxRow Xbetween Ycenter">
			<view class="left">
				<view class="name">
					<text class="color-36363A font28">{{ majorInfo.name }}</text>
				</view>
				<view class="tags fboxWrap">
					<block v-for="(item, index) in tagsList" :key="index">
						<view class="item font22">{{ item }}</view>
					</block>
				</view>
				<view class="color-9899A1 font22">
					<text>授予学位：{{ majorInfo.bachelorDegree }}</text>
				</view>
			</view>
			<view class="right">
				<view v-if="!majorInfo.isCollection">
					<text
						@click="onCollect(true)"
						class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36"
					/>
				</view>
				<view v-else>
					<text
						@click="onCollect(false)"
						class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36"
					/>
				</view>
			</view>
		</view>
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabsList"
				lineColor="#00C15D"
				lineWidth="40"
				:activeStyle="{
					color: '#00C15D'
				}"
				:inactiveStyle="{
					color: '#606266'
				}"
				@click="onTabChange"
			></u-tabs>
		</u-sticky>

		<view class="" v-if="activeTab == '1'">
			<view class="space-block"></view>
			<view class="rich-text color-36363A font28">
				<view class="" v-html="majorInfo.content"></view>
			</view>
		</view>
		<view class="" v-else>
			<view class="space-block"></view>
			<view class="list">
				<block v-for="(item, index) in schoolList.list" :key="index">
					<view class="item">
						<view style="padding: 0 30rpx" class="fboxRow Xbetween Ycenter">
							<view class="left fboxRow" @click="gotoDetail">
								<image :src="item.img"></image>
								<view class="content">
									<view class="name">
										<text
											class="color-36363A font28"
											style="margin-right: 26rpx"
										>
											{{ item.name }}
										</text>
										<text class="color-9899A1 font22">
											{{ item.heat }} 热度
										</text>
									</view>
									<view class="tags fboxWrap">
										<block v-for="(_item, _index) in item.tags" :key="_index">
											<view class="item font22">{{ _item }}</view>
										</block>
									</view>
								</view>
							</view>
							<view class="right">
								<view v-if="!item.isCheck">
									<text
										@click="onCollect(true, item.id, index)"
										class="bksCIcon bks-c-ziyuan16weishoucang color-C8C8CC font36"
									/>
								</view>
								<view v-else>
									<text
										@click="onCollect(false, item.id, index)"
										class="bksCIcon bks-c-ziyuan17shoucang color-F7C34A font36"
									/>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import { collectAdd, collectDel, majorDetail, schoolOpen } from '@/api/bks.index';
import headerCustom from '@/pagesBKS/components/header-custom.vue';
import { bksFunctionInfo } from '@/api/bks.index.js'
export default {
	components: { headerCustom },
	data() {
		return {
			theme: 'bks-theme',
			globalColor: getApp().globalData.globalColor,
			tabsList: [
				{
					name: '专业简介',
					id: '1'
				},
				{
					name: '开设院校',
					id: '2'
				}
			],
			sys: {},
			majorCategoryId: '', // 专业小类id
			majorInfo: {},
			tagsList: [], // 标签展示列表
			activeTab: 1,
			schoolList: {
				// 开设院校列表
				list: [],
				page: 1,
				size: 10,
				total: 0
			},
			isOverShare: true,
			actionInfo: {} // 分享数据
		};
	},
	onLoad(options) {
		this.majorCategoryId = options.id;
		this.getActionInfo();
		this.getMajorDetail();
		this.getSchoolOpen();
	},

	onReachBottom() {
		if (this.activeTab == 2) {
			const { page, size, total } = this.schoolList

			if (total > page * size) {
				this.schoolList.page = page + 1;
				this.getSchoolOpen();
			}
		}
	},
	onPullDownRefresh() {
		// this.initData();
		// this.request();
		// setTimeout(() => {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	},

	methods: {
		// 获取专业详情
		getMajorDetail() {
			majorDetail({
				majorCategoryId: this.majorCategoryId
			}).then((res) => {
				this.majorInfo = res.data;
				this.tagsList = [res.data.level1Name, res.data.level2Name];
			});
		},
		// tab切换
		onTabChange(val) {
			console.log(val);
			this.activeTab = val.id;
		},
		// 点击收藏
		onCollect(status, id, index) {
			console.log('收藏状态', status);
			let params = {
				businessId: this.majorCategoryId,
				collectType: '2'
			};

			if (id) {
				params = {
					businessId: id,
					collectType: '1'
				};
			}
			let fn = collectAdd,
				title = '已收藏';
			if (!status) {
				fn = collectDel;
				title = '已取消';
			}
			fn(params).then((res) => {
				if (id) {
					let {
						schoolList: { list }
					} = this;

					list[index].isCheck = status;

					this.schoolList.list = list;
				} else {
					this.majorInfo.isCollection = status;
				}
				uni.showToast({
					title,
					icon: 'none',
					duration: 2000
				});
			});
		},
		// 获取开设院校数据
		getSchoolOpen() {
			let {
				schoolList: { list, page, size },
				majorCategoryId
			} = this;

			schoolOpen({
				majorCategoryId,
				page,
				size
			}).then((res) => {
				let resList = [];

				res.data.list.forEach((item) => {
					if (item.popularity >= 1000) {
						item.popularity = (item.popularity / 10000).toFixed(1) + 'W';
					}
					resList.push({
						id: item.schoolId,
						name: item.schoolName,
						heat: item.popularity,
						img: item.logo,
						tags: item.tags,
						isCheck: item.isCollected
					});
				});

				this.schoolList.list = [...list, ...resList];

				this.schoolList.total = res.data.pageInfoVO.total;
			});
		},
		gotoDetail(e) {
			const id = e.currentTarget.dataset.id;

			this.$pageTo('/pages/index/school/index/index', {
				id
			});
		},
		getActionInfo() {
			// bksFunctionInfo({ identify: 'DIS0003' }).then((res) => {
			// 	this.actionInfo = res.data
			// });
		}
	}
};
</script>

<style scoped lang="scss">
.tags > .item {
	padding: 0 16rpx;
	background: #f5f5fa;
	border-radius: 3px;
	height: 36rpx;
	line-height: 36rpx;
	color: #9899a1;
	margin-top: 6rpx;
	margin-right: 12rpx;
}
.color-C8C8CC {
	color: #c8c8cc;
}
.color-F7C34A {
	color: #f7c34a;
}
.container {
	background-color: #fff;
}
.container .schoolinfo {
	padding: 20rpx 30rpx;
}

.container .schoolinfo .left .tags {
	margin: 8rpx 0 15rpx;
}
.container .rich-text {
	padding: 30rpx;
	line-height: 50rpx;
}
.container .list > .item {
	padding: 30rpx 0;
	border-bottom: 1px solid #f0f0f5;
}

.container .list > .item .left image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.container .list > .item .left .content {
	width: calc(100% - 120rpx);
}

.container .list > .item .right button {
	padding: 0;
	width: 118rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 6rpx;
	font-size: 24rpx;
}

.container .list > .item .right .uncheckbtn {
	border: 1px solid #6871fe;
	color: #6871fe;
}

.container .list > .item .uncheckbtn {
	color: #969699;
}
</style>
